<template>
  <van-list @load="onLoad" v-model="loading">
    <van-cell
      v-for="(item, index) in list"
      :key="index"
      size="large"
    >
      <!-- 只有一张图片的文章信息 -->
      <div class="list_1">
        <div class="title_label">
          <div class="title">{{ item.title }}</div>
          <div class="label">
            <span>{{ item.aut_name }}</span>
            <span>{{ item.comm_count }}评论</span>
            <span>{{ item.pubdate }}</span>
          </div>
        </div>
        <img class="van-image" :src="item.cover.images[0]" referrerPolicy="no-referrer"/>
      </div>
      <!-- 只有一张图片的文章信息 -->
    </van-cell>
  </van-list>
</template>
<script>
export default {
  props: {
    channel: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      finished: false,
      timestamp:null,
      list: [], //文章的列表数据
    };
  },

  mounted() {
    console.log(this.channel.id);
  },

  methods: {
    //请求列表的数据
    onLoad() {
      //请求文章的列表数据
      //请求文章列表
      let url = `/v1_1/articles?channel_id=${this.channel.id}&timestamp=${this.timestamp || Date.now()}&with_top=1`;

      //axios数据请求结果
      this.$axios.get(url).then((res) => {
        console.log(res);
        //把获取到的数据，赋给文章列表list
        // this.list = res.data.results;
        let {results} = res.data;
        //把新获取到的数据追加到当前列表的后面即可
        this.list.push(...results);

        if(results.length){
            this.timestamp = res.data.pre_timestamp;
        }
        this.loading = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.van-list {
  padding-bottom: 50px;
  .van-cell {
    width: 100%;
    border-bottom: #ccc 1px solid;
    //只有一张图片的css样式
    .list_1 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .title_label {
        width: 70%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .label {
          color: #808080;
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
      }
      .van-image {
        width: 25%;
      }
    }

    .list_3 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .img_list {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
      .label {
        color: #808080;
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>